<template>
  <!-- 单商品banner -->
  <view class="order-summary">
	  <view class="summary-item">
	    <view class="item-label">认养订单编号：</view>
	    <view class="summary-content">{{ orderitem.adopt_order_no }}</view>
	    <view class="copy-btn" @click="copyText(orderitem.adopt_order_no)">{{
	      $t("person.copy")
	    }}</view>
	  </view>
    <view class="summary-item">
      <view class="item-label">{{ $t("clerk.orderNum") }}：</view>
      <view class="summary-content">{{ orderitem.order_no }}</view>
      <view class="copy-btn" @click="copyText(orderitem.order_no)">{{
        $t("person.copy")
      }}</view>
    </view>
    <view class="summary-item">
      <view class="item-label">{{ $t("clerk.orderTime") }}：</view>
      <view>{{ orderitem.addtime }}</view>
    </view>
    <view class="hold-line"><view></view></view>

    <view class="summary-item" v-if="orderitem.is_pay == 1">
      <view class="item-label">{{ $t("order.methods") }}：</view>
      <view>{{ payTypeWord }}</view>
    </view>

    <view class="friend-pay" v-if="orderitem.pay_user_id">
      <view class="item-label">{{ $t("order.shareInfo") }}：</view>
      <view class="friend-info"
        >{{ orderitem.pay_user_info.name }}
        {{ orderitem.pay_user_info.mobile }}</view
      >
    </view>
    <view class="hold-line" v-if="orderitem.is_pay == 1">
      <view></view>
    </view>

    <view v-if="orderitem.order_type == 1" class="summary-item">
      <view class="item-label">{{ $t("order.expressMethos") }}：</view>
      <view v-if="orderitem.is_delivery == 1">{{
        $t("mdAdmin.distribution")
      }}</view>
      <view v-else>{{
        orderitem.is_offline == 1 ? $t("order.store") : $t("order.express")
      }}</view>
    </view>

    <!-- 商家留言 -->
    <view v-if="orderitem.words" class="summary-item">
      <view class="item-label" style="white-space: nowrap"
        >{{ $t("clerk.message2") }}：</view
      >
      <view>{{ orderitem.words }}</view>
    </view>
    <view class="hold-line"><view></view></view>

    <view
      v-if="orderitem.order_type != 0"
      class="summary-item flex-x-sb"
      v-for="item in orderitem.book_info"
      :key="item.goods_id"
    >
      <view class="item-label"> {{ item.key }}： </view>
      <view class="item-label">
        {{ item.value }}
      </view>
    </view>
<!-- 
    <view
      v-if="orderitem.order_type != 0 && orderitem.order_type != 4"
      class="summary-item flex-x-sb"
    >
      <view class="item-label"> {{ $t("alipay.time") }}： </view>
      <view
        v-if="orderitem.order_type == 2 && orderitem.book.date"
        class="item-label"
      >
        {{ orderitem.book.date || "" }}
      </view>
      <view v-else class="item-label no-margin">
        {{ orderitem.book.date || orderitem.food_book_ext.time }}
      </view>
    </view> -->

    <view class="summary-item flex-space-between">
      <!-- <view class="item-label">{{ $t("clerk.totalPrice") }}</view> -->
	  <view class="item-label">费用金额</view>
      <view>￥{{ orderitem.goods_total_price }}</view>
    </view>
    <view
      class="summary-item flex-space-between"
      v-if="orderitem.is_delivery != 1 && orderitem.order_type != 4"
    >
      <view class="item-label">{{ $t("clerk.freight") }}</view>
      <view>+￥{{ orderitem.express_price }}</view>
    </view>
    <view
      class="summary-item flex-space-between"
      v-if="orderitem.is_delivery == 1 && orderitem.order_type != 4"
    >
      <view class="item-label">{{ $t("mdAdmin.money") }}</view>
      <view>+￥{{ orderitem.delivery_info.fee || 0 }}</view>
    </view>
   <!-- <view class="summary-item flex-space-between">
      <view class="item-label">{{ $t("order.discount") }}</view>
      <view>-￥{{ orderitem.coupon_sub_price }}</view>
    </view> -->
	<view class="summary-item flex-space-between" v-for="(item,index) in orderitem.cost_detail" :key="index">
	  <view class="item-label">{{item.name}}</view>
	  <view >￥{{ item.total_price}}</view>
	</view>
	<view class="summary-item flex-space-between">
	  <view class="item-label">重量</view>
	  <view >{{ orderitem.weight}}Kg</view>
	</view>
	<view class="summary-item flex-space-between">
	  <view class="item-label">地址</view>
	  <view style="width: 80%;">{{ orderitem.address}}</view>
	</view>
    <view class="total-price">
      <text>{{ $t("order.needPay") }}：</text>
      <text
        >￥<text style="font-size: 36rpx">{{ orderitem.pay_price }}</text></text
      >
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    orderitem: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  filters: {},
  computed: {
    //   0:微信，2:货到付款，3:余额，4:支付宝
    payTypeWord() {
      const Pay_Trans = {
        1: this.$t("common.payMethod1"),
        2: this.$t("common.payMethod2"),
        3: this.$t("common.payMethod3"),
        4: this.$t("common.payMethod4"),
      };
      return Pay_Trans[this.orderitem.pay_type] || null;
    },
  },
  methods: {
    copyText(data) {
      let that = this;
      uni.setClipboardData({
        data: data,
        success: function () {
          uni.showToast({
            title: that.$t("common.copySuc"),
            icon: "none",
            duration: 2000,
          });
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.order-summary {
  width: 100%;
  background: #ffffff;
  padding: 30rpx 0;
  margin: 24rpx 0 295rpx 0;

  .summary-item {
    font-size: 26rpx;
    font-weight: 500;
    line-height: 44rpx;
    display: flex;
    align-items: center;
    color: #262626;
    margin-bottom: 30rpx;
    padding: 0 24rpx;

    .item-label {
      margin: 0 16rpx 0 0;
      font-weight: 400;
    }
    > view:nth-child(2) {
      font-weight: 600;
    }

    .copy-btn {
      font-size: 22rpx;
      font-weight: 400;
      height: 34rpx;
      background: #f5f5f5;
      border-radius: 17rpx;
      padding: 0 13rpx;
      text-align: center;
      line-height: 34rpx;
      margin-left: 16rpx;
    }
  }

  .friend-pay {
    font-size: 26rpx;
    font-weight: 500;
    line-height: 44rpx;
    display: flex;
    align-items: center;
    color: #262626;
    margin-bottom: 34rpx;
    padding: 0 24rpx;
    .item-label {
      margin: 0 16rpx 0 0;
      font-weight: 400;
    }
    .friend-info {
      display: flex;
      align-items: center;
      font-weight: 600;
    }
  }

  .hold-line {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding: 0 24rpx;
    margin-bottom: 30rpx;
    view {
      width: 100%;
      height: 1px;
      background: #f8f8f8;
    }
  }

  .flex-space-between {
    justify-content: space-between;
  }

  .total-price {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 26rpx;
    font-weight: 400;
    color: #1a1a1a;
    padding: 0 37rpx;

    text:nth-child(2) {
      color: #f0250f;
      margin-left: 20rpx;
      font-weight: 600;
    }
  }
  .no-margin {
    margin: 0 !important;
  }
}
</style>
